<template>
    <div class="register-container">
        <div class="register-form-wrapper">
            <h2 class="register-title">用户注册</h2>
            <form @submit.prevent="handleRegister">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input
                            type="text"
                            id="username"
                            v-model="username"
                            placeholder="请输入用户名"
                            required
                            class="form-control"
                    />
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input
                            type="password"
                            id="password"
                            v-model="password"
                            placeholder="请设置密码"
                            required
                            class="form-control"
                    />
                </div>
                <div class="form-group">
                    <label for="rePassword">确认密码</label>
                    <input
                            type="password"
                            id="rePassword"
                            v-model="rePassword"
                            placeholder="请再次输入密码"
                            required
                            class="form-control"
                    />
                </div>
                <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
                <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
                <button type="submit" class="register-button" :disabled="isLoading">
                    {{ isLoading ? '注册中...' : '注册' }}
                </button>
                <div class="login-link">
                    已有账号？
                    <router-link to="/login">立即登录</router-link>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {register} from '../services/authService';

export default {
    name: 'RegisterView',
    setup() {
        const router = useRouter();
        const username = ref('');
        const password = ref('');
        const rePassword = ref('');
        const errorMessage = ref('');
        const successMessage = ref('');
        const isLoading = ref(false);

        const handleRegister = async () => {
            // ...表单验证...
            isLoading.value = true;
            errorMessage.value = '';
            successMessage.value = '';

            try {
                const response = await register(username.value, password.value, rePassword.value);

                if (response.code === 1) {
                    successMessage.value = '注册成功，请登录';
                    setTimeout(() => {
                        router.push('/login');
                    }, 2000);
                } else {
                    errorMessage.value = response.msg || '注册失败，请重试';
                }
            } catch (error) {
                errorMessage.value = '注册失败：' + (error.response?.data?.msg || error.message);
                console.error('注册失败:', error);
            } finally {
                isLoading.value = false;
            }
        };

        return {
            username,
            password,
            rePassword,
            errorMessage,
            successMessage,
            isLoading,
            handleRegister
        };
    }
};
</script>

<style scoped>
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.register-form-wrapper {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
}

.register-title {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-size: 24px;
    font-weight: 600;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: #4c8baf;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.error-message {
    color: #e74c3c;
    margin-bottom: 15px;
    padding: 10px;
    background: #fee;
    border-radius: 6px;
    font-size: 14px;
}

.success-message {
    color: #6aa8c5;
    margin-bottom: 15px;
    padding: 10px;
    background: #efe;
    border-radius: 6px;
    font-size: 14px;
}

.register-button {
    width: 100%;
    padding: 12px;
    background: #60c6d8;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.register-button:hover:not(:disabled) {
    background: #324f74;
}

.register-button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.login-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.login-link a {
    color: #4c8baf;
    text-decoration: none;
}

.login-link a:hover {
    text-decoration: underline;
}
</style>```